import { changeConfirmLocale } from "antd/lib/modal/locale";
import React, { Component, useState } from "react";
import "./Banner.css";

// 强制更新

export default function Banner(props) {
  // const { render } = props;
  // 是否显示文案
  const [descStatus, setdescStatus] = useState(false);

  // 是否显示按钮
  const [benStatus, setbenStatus] = useState(false);

  // 定义计时器 使用ref管理
  const timer = React.useRef();

  // 补充图片列表长度 可能传入的图片少于5张
  const imageList = React.useMemo(() => {
    if (props.list.length > 5) {
      return props.list;
    }
    function cloneImages(list) {
      if (list.length < 5) {
        return cloneImages([...list, ...props.list]);
      }
      return list;
    }
    return cloneImages(props.list);
  }, []);

  /**
   * 默认配置项
   */
  const setConfig = React.useMemo(() => {
    return Object.assign(
      {
        showBtn: false,
        delay: 2000,
        reflect: true,
      },
      props
    );
  }, []);

  // 图片定位
  const positions = React.useRef(
    [
      "first",
      "prev",
      "curr",
      "next",
      "last",
      "last",
      "last",
      "last",
      "last",
      "last",
    ].slice(0, imageList.length)
  );

  // 图片位置算法
  const changeImagePosition = React.useCallback((isReduce) => {
    // 隐藏图片
    setdescStatus(false);
    if (isReduce) {
      positions.current.push(positions.current.shift());
    } else {
      positions.current.unshift(positions.current.pop());
    }
    // props.render();
  }, []);

  /**
   * 激活定时器 为了避免每次渲染一个新的计时器 使用useCallback来缓存计时器
   */
  const handlerImagePosition = React.useCallback(() => {
    timer.current = setInterval(() => {
      changeImagePosition();
    }, 1000);
  }, []);

  // position发生变化的时候需要将当前的图片文案显示
  // 需要通过监听positions的变化
  React.useEffect(() => {
    // 不显示倒影 就显示文案
    if (!setConfig.reflect) {
      setTimeout(() => {
        setdescStatus(true);
      }, 500);
    }
  }, []);

  // 默认计时器 只需要一次就行
  React.useEffect(() => {
    handlerImagePosition();
    return () => clearInterval(timer.current);
  }, []);

  // 移入事件
  const onMouseEnter = () => {
    clearInterval(timer.current);
    setbenStatus(true);
  };

  // 移出事件
  const onMouseLeave = () => {
    handlerImagePosition();

    setbenStatus(false);
  };

  const { curr, prev, next, first, last } = positions.current;
  return (
    <div
      className="carousel"
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
    >
      <div className="image_list">
        {imageList.map((item, index) => {
          const className = positions.current[index];
          return (
            <div
              key={index}
              // 通过currImage 与 index 比较当前应该展示的图片
              className={`image_wrap animat ${className} 
              ${setConfig.reflect && className === "curr" ? "reflect" : ""} `}
            >
              {/* 通过showDesc来判断是否显示文案 */}
              <div
                className={`desc${
                  positions.current[index] === curr && descStatus
                    ? " showDesc"
                    : ""
                }`}
              >
                {item.desc}
              </div>
              <img src={item.src} alt="" />
            </div>
          );
        })}
      </div>
      <button
        onClick={() => changeImagePosition(true)}
        className={`changeBtn leftBtn${benStatus ? " showButton" : ""}`}
      >
        {"<"}
      </button>
      <button
        onClick={() => changeImagePosition()}
        className={`changeBtn rightBtn${benStatus ? " showButton" : ""}`}
      >
        {">"}
      </button>
    </div>
  );
}
